<template>
  <div class="app-container">
    <div class="container">
      <div class="column">
        <h1>API 接口调用方法说明</h1>
        <h2>接口地址</h2>
        <p> 服务器A：<code>{{ urlA }}:5050/api/image_to_ocr</code></p>
        <p>服务器B：<code>{{ urlB }}:5050/api/image_to_ocr</code></p>
        <p>服务器C：<code>{{ urlC }}:5050/api/image_to_ocr</code></p>
        <h2>请求方法</h2>
        <p><code>POST</code></p>
        <h2>请求头</h2>
        <pre>
Content-Type: multipart/form-data
        </pre>
        <h2>请求体</h2>
        <pre>
{
    "file": &lt;file&gt;  // 支持.jpg, .jpeg, .png, .bmp, .tif, .pdf格式
}
        </pre>
        <h2>响应示例</h2>
        <pre>
{
    "json_results": [
        {
            "height": 20,
            "width": 10,
            "str": "A",
            "y": 100,
            "x": 50,
            "accumulated_y": 100
        },
        ...
    ],
    "final_text_output": "这是识别的文本结果，换行信息根据原始文本中的方块，如需按自然段等换行需调用接口时对/n进行处理。上面的文字定位JSON信息为适配自动标引，以单个字为基本单位。"
}
        </pre>
      </div>
      <div class="column">
        <h1>CURL 命令示例</h1>
        <h2>您可以使用以下CURL命令来调用OCR API：</h2>
        <pre>
curl -X POST {{ url }}:5050/api/image_to_ocr \
-F "file=@/path/to/your/file.jpg"
        </pre>
        <h2>请将 <code>/path/to/your/file.jpg</code> 替换为您要上传的文件的实际路径。</h2>
      </div>
    </div>
  </div>
</template>


<script>



export default {



  data() {
    return {

      urlA: process.env.VUE_APP_BASE_SER_HOST_A,
      urlB: process.env.VUE_APP_BASE_SER_HOST_B,
      urlC: process.env.VUE_APP_BASE_SER_HOST_C,

    }
  },

  mounted() {

  },



  async created() {

  },
  methods: {



  }
}
</script>


<style lang="scss" scoped>
.container {
  max-width: 800px;
  margin: 0 auto;
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
  font-size: 24px;
  margin-bottom: 20px;
}
p {
  font-size: 18px;
  margin-bottom: 10px;
}
p,
pre {
  margin: 0 0 15px 0;
  line-height: 1.6;
}
pre {
  background-color: #f9f9f9;
  padding: 10px;
  border: 1px solid #ddd;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.note {
  color: #555;
  font-style: italic;
}
</style>

